import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Input, Select, Grid, Button } from '@alifd/next';
import { FormBinderWrapper, FormBinder } from '@icedesign/form-binder';
import IceContainer from '@icedesign/container';
import '@alifd/next/dist/next.css';

const { Row, Col } = Grid;

// 级联select（类别）
// const bigTypes = ['教育专区', 'PPT专区', '专业资料', '实用文档', '生活休闲'];
// const smallTypes = {
//   教育专区: ['幼儿教育', '小学教育', '初中教育', '高中教育', '高等教育', '教学研究', '外语学习', '资格考试/认证', '课件专区', '成人教育', '职业教育'],
//   PPT专区: ['科技', '人文社科', '经管营销', '办公应用'],
//   专业资料: ['IT/计算机', '医药卫生', '自然科学', '农林牧渔', '人文社科', '工程科技'],
//   实用文档: ['求职/职场', '计划/解决方案', '工作范文', '党团工作', '法律文书', '总结/汇报', '表格/模版'],
//   生活休闲: ['饮食', '游戏', '音乐', '美容化妆', '随笔', '摄影摄像', '影视/动漫']
// };

class WorkSearch extends PureComponent {
  // constructor(props) {
  //   super(props);

  //   this.state = {
  //     formValue: {},
  //     data: [],
  //     disabled: true
  //   };

  //   this.handleBigTypesChange = this.handleBigTypesChange.bind(this);
  //   this.handleSmallTypesChange = this.handleSmallTypesChange.bind(this);
  // }

  // handleBigTypesChange(value) {
  //   const data = smallTypes[value];
  //   this.setState({
  //     data, 
  //     bigger: value, 
  //     smaller: '', 
  //     disabled: !data
  //   })
  // }

  // handleSmallTypesChange(value) {
  //   this.setState({
  //     smaller: value
  //   })
  //   console.log(this.state.bigger, value);
  // }

  // formChange = (value) => {
  //   console.log('changed value', value);
  //   this.setState({
  //     formValue: value,
  //   });
  // };

  render() {
    // const { formValue, data, disabled, bigger, smaller } = this.state;
    const { searchFormValue, authorName } = this.props;

    return (
      <IceContainer title="搜索">
        <FormBinderWrapper value={searchFormValue} onChange={(value) => this.props.searchFormChange(value)}>
          <Row wrap>
            <Col xxs="24" l="8" style={styles.formCol}>
              <span style={styles.label}>作者名字:</span>
              <FormBinder name="authorName">
                <Input placeholder="请输入作者名字" />
              </FormBinder>
            </Col>
            {/* <Col xxs="24" l="8" style={styles.formCol}>
              <span style={styles.label}>所属分类:</span>
              <FormBinder name="workType">
                <div style={styles.demoContainer}>
                  <Select style={styles.nextSelect} placeholder="选择大分类" dataSource={bigTypes} value={bigger} onChange={this.handleBigTypesChange} />
                  <Select placeholder="选择小分类" dataSource={data} value={smaller} onChange={this.handleSmallTypesChange} disabled={disabled}/>
                </div>
              </FormBinder>
            </Col>
            <Col xxs="24" l="6" style={styles.formCol}>
              <span style={styles.label}>其他:</span>
              <FormBinder name="others">
                <Input placeholder="请输入其他关键字" />
              </FormBinder>
            </Col> */}
            <Col xxs="24" l="2" style={styles.formCol}>
              <Button type="secondary" size="medium" onClick={() => this.props.searchWorkByAuthor(authorName)}>搜索</Button>
            </Col>
          </Row>
        </FormBinderWrapper>
      </IceContainer>
    );
  }
}

const styles = {
  formRow: {
    marginBottom: '18px',
  },
  formCol: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: '20px',
  },
  label: {
    lineHeight: '28px',
    paddingRight: '10px',
    color: '#424242',
  },
  demoContainer: {
    backgroundColor: '#f8f8f8',
    padding: '16px',
  },
  nextSelect: {
    marginRight: '10px',
  }
};

const mapState = (state) => ({
  searchFormValue: state.Works.get('searchFormValue'),
  authorName: state.Works.get('authorName')
});

const mapDispatch = (dispatch) => ({
  searchFormChange(value) {
    dispatch(actionCreators.searchFormChange(value));
  },
  searchWorkByAuthor(authorName) {
    dispatch(actionCreators.searchWorkByAuthor(authorName));
  }
});

export default  connect(mapState, mapDispatch)(WorkSearch);